import React, { useCallback, useState } from 'react';

let Child = (props) => {
  console.log('Child 组件被执行了');
  return (
    <div>
      <h1>Child - {props.info.name} --- {props.info.age}</h1>
      <button onClick={()=>{
        props.changeName('梦龙')
      }}>修改 name</button>
    </div>
  );
}

Child = React.memo(Child)



const App = () => {

  const [count, setCount] = useState(100)
  const [name,setName] = useState('小张')
  const [age, setAge] = useState(18)

  const info = { name, age }

    /*
      useCallback 接收两个参数，会有一个返回值
      参数一是一个回调函数，参数而是一个依赖项
      返回值是一个函数
      useCallback 当子组件使用了父组件中的数据或者方法的时候，父组件修改值后，子组件会被
      重新渲染
      useCallback 将使用到的函数进行包裹即可，useCallback 操作的是函数，可以缓存函数
    */
  const changeName = useCallback((val)=>{
    setName(val)
  }, [])

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={()=>{
        setCount(count + 1)
      }}>加 1</button>

      <Child info={info} changeName={changeName} />
    </div>
  );
};

export default App;
